import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Button, CapsuleTabs, TextArea, ImageUploader } from 'antd-mobile'
import type { ImageUploadItem } from 'antd-mobile/es/components/image-uploader'
import { useState } from 'react'
function Index() {
  const nav=useNavigate()
  const [feedbackType, setFeedbackType] = useState('功能异常')
  const [content, setContent] = useState('')
  const [fileList, setFileList] = useState<ImageUploadItem[]>([])
  
  const handleBack = () => {
    nav(-1) // 返回上一个页面
  }

  const mockUpload = async (file: File) => {
    return {
      url: URL.createObjectURL(file)
    }
  }

  return (
       <div style={{backgroundColor:'#f2f2f2',width:'100vw',height:'100vh'}}>
      <NavBar onBack={handleBack} style={{width:'100vw',backgroundColor:'#fff'}}>意见反馈</NavBar>
      
      <div style={{padding:'12px'}}>
        <div style={{background:'#fff',borderRadius:'8px',padding:'12px'}}>
          <div style={{fontSize:'14px',color:'#333',marginBottom:'8px'}}>问题反馈类型</div>
          <CapsuleTabs onChange={(key)=>setFeedbackType(String(key))}>
            <CapsuleTabs.Tab title='功能异常' key='功能异常' />
            <CapsuleTabs.Tab title='优化建议' key='优化建议' />
            <CapsuleTabs.Tab title='其他反馈' key='其他反馈' />
          </CapsuleTabs>
          <div style={{marginTop:'12px'}}>
            <TextArea
              value={content}
              onChange={setContent}
              placeholder='请输入您想反馈的内容...'
              rows={6}
              maxLength={500}
              showCount
            />
          </div>
          <div style={{marginTop:'16px'}}>
            <div style={{fontSize:'14px',color:'#333',marginBottom:'8px'}}>添加图片（选填，最多4张）</div>
            <ImageUploader
              value={fileList}
              onChange={setFileList}
              upload={mockUpload}
              multiple
              maxCount={4}
            />
          </div>
        </div>
      </div>

      <div style={{position:'fixed',left:0,right:0,bottom:0,backgroundColor:'#fff',padding:'12px'}}>
        <Button block color='primary' size='large' >
       提交
        </Button>
      </div>
    </div>
  )
}

export default Index
